<template>
  <view class="charts-box">
    <view class="title">
    房间甲醛浓度趋势
    </view>
    <qiun-data-charts type="line" :opts="{extra}" :chartData="chartData" background="none" />
  </view>
</template>

<script>
  export default {
    data() {
      return {
        chartData: {
          "categories": [
            "基础材料",
            "家具",
            "地板",
            "门窗",
            "窗帘布艺",
            "其他材料"
          ],
          "series": [{
              "name": "客厅/餐厅",
              "data": [
                0.3,
                0.1,
                0.3,
                0.2,
                0.1,
                0.3,
              ]
            },
            {
              "name": "卧室",
              "data": [
                0,
                0.2,
                0.5,
                0.3,
                0.2,
                0.5,
              ]
            },
            {
              "name": "儿童房",
              "data": [
                0.02,
                0.3,
                0.25,
                0.4,
                0.3,
                0.6,
              ]
            },
            {
              "name": "厨房",
              "data": [
                0.3,
                0.2,
                0.1,
                0.5,
                0.3,
                0.55,
              ]
            },
            {
              "name": "书房",
              "data": [
                0.4,
                0.5,
                0.2,
                0.5,
                0.3,
                0.5,
              ]
            }
          ]
        },
        // 标记线的位置
        extra: {
          markLine: {
            data: [{
              value: 0.1
            }, {
              value: 0.2
            }]
          }
        },
        config: {}
      }
    },
    onLoad() {
      // uni.navigateTo({
      //   url: '/pages/dev'
      // })
    }
  }
</script>

<style lang="less">
  /* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
  .charts-box {
    margin-top: 300rpx;
    width: 100%;
    height: 300px;

    .title {
      margin-bottom: 30rpx;
      font-size: 30rpx;
      font-weight: bold;
      text-align: center;
    }
  }
</style>
